import { NavBar, DatePicker } from "antd-mobile";
import "./month.scss";
import { useEffect, useMemo, useState } from "react";
import classNames from "classnames";
import dayjs from "dayjs";
import { useSelector } from "react-redux";
import _ from "loadsh";
import DailyBill from "./MonthDay/daybill";
const Month = () => {
  const [dateVisible, setDateVisible] = useState(false);

  const [currentdate, setcurrentdate] = useState(() => {
    return dayjs().format("YYYY-MM");
  });
  const [currentDataList, setcurrentDataList] = useState([]);

  const billList = useSelector((state) => state.bill.list);
  const confirm = function (date) {
    setDateVisible(false);
    const formattedDate = dayjs(date).format("YYYY-MM");
    setcurrentDataList(monthGroup[formattedDate]);
    setcurrentdate(formattedDate);
  };
  // 相当于computed  按照月份分组
  const monthGroup = useMemo(() => {
    const temp = _.groupBy(billList, (item) =>
      dayjs(item.date).format("YYYY-MM")
    );
    return temp;
  }, [billList]);

  // 初始化渲染
  useEffect(() => {
    if (monthGroup[currentdate]) {
      setcurrentDataList(monthGroup[currentdate]);
    }
  }, [monthGroup, currentdate]);

  const monthResult = useMemo(() => {
    let pay = 0;
    let income = 0;
    currentDataList.forEach((item) => {
      if (item.type === "pay") {
        pay += item.money;
      } else if (item.type === "income") {
        income += item.money;
      }
    });
    return {
      pay,
      income,
      total: pay + income,
    };
  }, [currentDataList]);
  // console.log(monthResult，'月度账单计算结果');

  // 日账单
  const dayBillGroup = useMemo(() => {
    const groupData = _.groupBy(currentDataList, (item) =>
      dayjs(item.date).format("YYYY-MM-DD")
    );
    const keys = Object.keys(groupData);
    return { groupData, keys };
  }, [currentDataList]);

  return (
    <div className="monthlyBill">
      <NavBar className="nav" back={null}>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date" onClick={() => setDateVisible(true)}>
            <span className="text">
              {dayjs(currentdate).format("YYYY-MM")}月账单
            </span>
            <span
              className={classNames("arrow", { expand: dateVisible })}
            ></span>
          </div>
          {/* 统计区域 */}
          <div className="twoLineOverview">
            <div className="item">
              <span className="money">{monthResult.pay.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.income.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.total.toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>

          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={dateVisible}
            onCancel={() => setDateVisible(false)}
            onConfirm={confirm}
            onClose={() => setDateVisible(false)}
            max={new Date()}
          />
        </div>
        {/* //单日账单 */}

        {dayBillGroup.keys.map((item) => (
          <DailyBill
            key={item}
            date={item}
            list={dayBillGroup.groupData[item]}
          />
        ))}
      </div>
    </div>
  );
};

export default Month;
